<template>
  <app-module>
    <div slot="top" class="app-service-center-content-monitor__top">
      <div class="app-service-center-content-monitor__top__title-wrapper">
        <div class="app-service-center-content-monitor__top__title-wrapper__title">微状态</div>
      </div>
    </div>
    <div slot="center" class="app-service-center-content-monitor__center">
      <app-monitor-goal :show="charts[0].show" :tars="tars"></app-monitor-goal>
      <app-monitor-tomato :toms="toms" :show="charts[1].show"></app-monitor-tomato>
      <app-monitor-env :envs="envs" :show="charts[2].show"></app-monitor-env>
    </div>
    <div slot="bottom" class="app-service-center-content-monitor__bottom">
      <div class="app-service-center-content-monitor__bottom__btn-wrapper">
        <t-button v-for="chart in charts" :type="chart.type" size="normal" :key="chart.name" @click="handleSwitch(chart)">{{ chart.displayName }}</t-button>
      </div>
    </div>
    <div slot="other">
      
    </div>
  </app-module>
</template>

<script>
  import TButton from '@/components/button';
  import appModule from '@/app/service/center/content/module';
  import appMonitorTomato from '@/app/service/center/content/monitor/tom';
  import appMonitorEnv from '@/app/service/center/content/monitor/env';
  import appMonitorGoal from '@/app/service/center/content/monitor/goal';
  
  export default {
    name: 'app-service-center-content-monitor',
    components: {
      TButton,
      appModule,
      appMonitorTomato,
      appMonitorEnv,
      appMonitorGoal,
    },
    data() {
      return {
        toms: {},
        envs: {},
        tars: {},
        tems: [],
        hums: [],
        luxs: [],
        current: null,
        charts: [{
          displayName: '番茄目标',
          show: false,
          type: 'primary',
        },
        {
          displayName: '番茄状态',
          show: false,
          type: 'primary',
        },
        {
          displayName: '环境状态',
          show: false,
          type: 'primary',
        }],
      };
    },
    created() {
      this.handleTomatoTargetUpdate();
      this.handleTomatoUpdate();
      this.handleEnvUpdate();
    },
    mounted() {
      this.charts[0].type = 'success';
      this.charts[0].show = true;
      this.current = this.charts[0];
    },
    methods: {
      handleTomatoTargetUpdate() {
        const target = 'api/state/tomato-target';
        this.$http.request({
          url: target,
          method: 'get',
        }).then((response) => {
          this.tars = response.data;
        }).catch(() => {
        });
      },
      handleTomatoUpdate() {
        const target = 'api/state/tomato';
        this.$http.request({
          url: target,
          method: 'get',
        }).then((response) => {
          this.toms = response.data;
        }).catch(() => {
        });
      },
      handleEnvUpdate() {
        const target = 'api/state/environment';
        this.$http.request({
          url: target,
          method: 'get',
        }).then((response) => {
          this.envs = response.data;
        }).catch(() => {
        });
      },
      handleSwitch(chart) {
        if (this.current) {
          this.current.type = 'primary';
          this.current.show = false;
        }
        this.current = chart;
        this.current.type = 'success';
        this.current.show = true;
      },
    },
  };
</script>